<template>
    <div class="courses container">
        <h1>课程介绍</h1>
        <div class="course-list">
            <div class="course-item">
                <img src="@/assets/language.jpg" alt="语言课程"/>
                <h2>语言课程</h2>
                <p>通过故事、歌曲和游戏，培养孩子的语言表达能力和阅读兴趣。</p>
            </div>
            <div class="course-item">
                <img src="@/assets/art.jpg" alt="艺术课程"/>
                <h2>艺术课程</h2>
                <p>激发孩子的创造力和想象力，体验绘画、手工和音乐的乐趣。</p>
            </div>
            <div class="course-item">
                <img src="@/assets/nature.jpeg" alt="科学课程"/>
                <h2>科学课程</h2>
                <p>通过有趣的实验和观察，培养孩子的好奇心和探索精神。</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Courses'
}
</script>

<style scoped>
.course-list {
    display: flex;
    justify-content: space-between;
}
.course-item {
    width: 30%;
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.course-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .course-list {
        flex-direction: column;
        gap: 20px;
    }
    .course-item {
        width: 100%;
    }
}
</style>
